<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资产管理</title>
    <script src="../../static/bootstrap5.0.1/bootstrap5/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="../../static/bootstrap5.0.1/bootstrap5/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/layuiadmin/style/admin.css" media="all">
    <script src="../../static/layuiadmin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../static/css/common.css">
    <style>
        .bx {
            margin-left: 50px;
            margin-top: 50px;
        }

        .layui-table-cell {
            height: 40px;
            line-height: 40px;
        }

        .layui-input-block {
            margin-left: 150px;
            min-height: 36px;
        }
    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-inline tp">
        <div class="layui-form-item" style="margin-left: -110px;">
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入资产名称"
                       autocomplete="off" class="layui-input" id="material_name">
            </div>
        </div>
    </div>
    <!--    <div class="layui-inline">-->
    <!--        <label class="layui-form-label" style="width: auto;">日志创建时间</label>-->
    <!--        <div class="layui-input-inline">-->
    <!--            <input type="text" name="date" id="log_date_search" lay-verify="date" placeholder="yyyy-MM"-->
    <!--                   autocomplete="off"-->
    <!--                   class="layui-input">-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="layui-inline tp1">
        <div class="layui-form-item">
            <button id="searchconfig" class="btn btn-primary">搜索</button>
            <button id="datainit" class="btn btn-danger">生成基础物料</button>
            <label style="margin-left:20px;color: red;"> *生成基础物料按钮，请谨慎使用，会清空所有已经录入的资产数量，重置为 0</label>
        </div>
    </div>
    <div id="show_table" lay-filter="show_table">
    </div>
</div>
<div id="addquantity" style="display: none;">
    <div class="layui-form tp">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto;" for="material_quantity">资产数量</label>
            <div class="layui-input-block" style="width: 200px;">
                <input type="number" id="material_quantity" name="zc_name" lay-verify="required"
                       placeholder="请输入资产类型名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
</div>
<div style="display: none;" id="show_bind_msg">
    <div id="bind_table" lay-filter="bind_table"></div>
</div>
</body>
<script type="text/html" id="operator">
    <!--    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</button>-->
    <!--    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="execute">查看绑定条件</button>-->
    <!--    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">新增</button>-->
    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">编辑</button>
</script>
<script>
    layui.use(["table", "jquery", "layer", "laydate"], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            let laydate = layui.laydate;
            laydate.render({
                elem: "#log_date_search",
                value: new Date(),
                format: "yyyy-MM",
                type: 'month'
            })
            tableRender(null);

            function tableRender(param) {
                table.render({
                    elem: "#show_table",
                    method: "post",
                    url: "/api/material/get_quantity_list",
                    where: param,
                    page: true,
                    limit: 8,
                    limits: [8, 10, 20, 30],
                    cols: [[
                        {
                            field: "id",
                            title: "编号",
                            width: 50,
                            align: "center",
                            style: 'background-color:white;color:gray;opacity:0.9;'
                        },
                        {
                            field: "m_type",
                            title: "资产类型",
                            width: 100,
                            align: "center",
                            style: 'background-color:white;color:gray;opacity:0.9;'
                        },
                        {
                            field: "material_id",
                            title: "资产编号",
                            width: 100,
                            align: "center",
                            style: 'background-color:white;color:gray;opacity:0.9;'
                        },
                        {
                            field: "material_name",
                            title: "资产名称",
                            align: "center",
                            width: 200,
                            style: 'background-color:white;color:gray;opacity:0.9;'
                        },
                        {
                            field: "material_quantity",
                            title: "资产数量",
                            align: "center",
                            width: 150,
                            style: 'background-color:white;color:red;opacity:0.9;'
                        },
                        {
                            field: "effect_start",
                            title: "资产有效开始日期",
                            align: "center",
                            width: 150,
                            style: 'background-color:white;color:red;opacity:0.9;'
                        },
                        {
                            field: "effect_end",
                            title: "资产有效结束日期",
                            align: "center",
                            width: 150,
                            style: 'background-color:white;color:red;opacity:0.9;'
                        },
                        {
                            field: "create_time",
                            title: "创建时间",
                            align: "center",
                            width: 150,
                            style: 'background-color:white;color:purple;opacity:0.9;'
                        }
                        ,
                        {
                            title: "操 作",
                            toolbar: "#operator",
                            align: "center",
                            style: 'background-color:white;color:gray;opacity:0.9;'
                        }
                    ]]
                })
            }

            table.on('tool(show_table)', function (obj) {
                let row_data = obj.data;
                let material_quantity = row_data["material_quantity"];
                let material_id = row_data["material_id"]
                if (obj.event === 'del') {
                    let param = {
                        id: row_data["id"]
                    }
                    $.post("/api/material/del", param, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                tableRender(null)
                            })
                        } else {
                            layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                // tableRender(null)
                            })
                        }
                    })
                }
                if (obj.event === 'add') {

                    //新增
                    let open_index = layer.open({
                        type: 1,
                        content: $('#addquantity'),
                        title: '编辑资产数量',
                        area: ['400px', '200px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layerout) {
                            let param = {
                                material_quantity: $("#material_quantity").val(),
                                material_id: material_id
                            }
                            $.post("/api/material/update_quantity", param, function (res) {
                                if (res.code === 200) {
                                    layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                        tableRender(null)
                                        layer.close(open_index);
                                    })
                                } else {
                                    layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                        // tableRender(null)
                                    })
                                }
                            })
                        },
                        btn2: function (index, layer) {

                        },
                        success: function () {
                            $("#material_quantity").val(material_quantity);
                        }
                    })
                }
            })

            $("#searchconfig").click(function () {
                search_func();
            })

            function search_func() {
                let material_name = $("#material_name").val()
                tableRender({
                    "material_name": material_name
                });
            }

            $('#order_no_search').bind('keypress', function (event) {
                if (event.keyCode === 13) {
                    search_func();
                }
            })

            $("#datainit").click(function () {
                /**
                 // 显示加载层
                 // let loadIndex = layer.load(0, {
                 //     shade: [0.5, '#fff'],
                 //     zIndex: layer.zIndex,
                 //     content: "正在订单校验中...请稍后"
                 // });
                 // 在顶层显示加载层
                 // layer.setTop();
                 **/
                $.post("/api/material/material_init", {}, function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg, {icon: 6, time: 3000}, function () {
                            tableRender(null)
                        })
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 3000}, function () {
                            // tableRender(null)
                        })
                    }
                })
            })
        }
    )


</script>
</html>